<template>
  <div>
    懒加载回显数据
    <el-cascader v-model="test" :props="props"></el-cascader>
    {{ test }}
    <hr />
    {{ value }}
    <treeselect
      :options="options"
      :load-options="loadOptions"
      placeholder="Try expanding any folder option..."
      v-model="value"
      :alwaysOpen="true"
      :flatten-search-results="true"
      :default-expand-level="5"
    />
  </div>
</template>

<script>
let id = 0;
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";

// We just use `setTimeout()` here to simulate an async operation
// instead of requesting a real API server for demo purpose.
const simulateAsyncOperation = (fn) => {
  setTimeout(fn, 2000);
};
export default {
  name: "menu8",
  components: {
    Treeselect,
  },
  data() {
    return {
      value: "child",
      options: [
        {
          id: "success",
          label: "With children",
          // Declare an unloaded branch node.
          children: null,
        },
        {
          id: "no-children",
          label: "With no children",
          children: null,
        },
        {
          id: "failure",
          label: "Demonstrates error handling",
          children: null,
        },
      ],
      test: [1, 3],
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
    };
  },
  methods: {
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
          case "success": {
            simulateAsyncOperation(() => {
              parentNode.children = [
                {
                  id: "child",
                  label: "Child option",
                },
              ];
              console.log(
                "action, parentNode, callback=>",
                action,
                parentNode,
                callback
              );

              callback();
            });
            break;
          }
          case "no-children": {
            simulateAsyncOperation(() => {
              parentNode.children = [];
              callback();
            });
            break;
          }
          case "failure": {
            simulateAsyncOperation(() => {
              callback(new Error("Failed to load options: network error."));
            });
            break;
          }
          default: /* empty */
        }
      }
    },
  },
  // var arr = [1, 5, 8]
  //   var currentIndex = 0;
  //   getResult(arr[currentIndex])
  //   function getResult(index) {
  //     if (currentIndex >= arr.length) {
  //       return;
  //     }
  //     axios.get("https://dev.zhixiaobie.com:24190/api/ShowModel/GetInfo").then((result) => {
  //       currentIndex++;
  //       console.log("test", index, result);

  //       // [].forEach(itm => {
  //       //   if(itm===index){
  //       //     itm.childer=[]
  //       //   }else{
  //       //     itm.childer=null
  //       //   }
  //       // });

  //       getResult(arr[currentIndex]);

  //     }).catch((err) => {
  //       console.log('err=>', err);
  //     });
  //   }
};
</script>

<style>
</style>